$(function(){
    $.ajax({
            type : "get",
            url : "http://chst.vip:1234/api/getbrandtitle"
        }).then((res)=>{
        var arr = res.result;
        let html = ''
        arr.forEach(item =>{
            html += `
            <li class="infoLi" id="${item.brandTitleId}">
               <span>${item.brandTitle}</span>
               <span>▼</span>
            </li>
            <div class="liFlex">
                <div class="liBox"></div>
            </div>
            `
        })
        $('.info').html(html)
       })

       $('.info').on('click',function (e) {
        if(e.target.nodeName == 'LI'){
            if($(e.target).next().attr('open') == 'open'){
                $(e.target).next().slideToggle(200)
                $(e.target).next().removeAttr('open')
                return
            }
        
        $.each($('.liFlex'),function(index,value){
            $(value).removeAttr('open')
            if($(value).css('display') == 'block'){
                $(value).slideToggle(200)
            }
        })
        $.ajax({
            type:"get",
            url:`http://chst.vip:1234/api/getbrand?brandtitleid=${e.target.id}`
        }).then((res)=>{
            var arr = res.result;
            let html = ''
            arr.forEach((item,index )=>{
                html += `
                <div class="boxSmall">          
                   <a href="./brand.html?title=${item.brandName}&brandId=${item.brandId}" class="f1">
                        <i class="f2">${index+1}</i>
                        ${item.brandName}
                        <div class="sel">${item.brandInfo}</div>
                   </a>
            </div>
                `
            })
            $(e.target).next().attr('open','open')
            $(e.target).next().slideToggle(200)
            $('.liBox').html(html)
            })
        }else if(e.target.classNane == 'boxSmall'){
            console.log(123);
        }
     })
   
})

